<script setup>
import vipListItem from "./vipListItem.vue";
import vipPainting from "./vipPainting.vue";
import { getIsIos } from "@/utils/host";
import Introduce from "./Introduce.vue";
import vipPayPopup from "./vipPayPopup.vue";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
const active = ref(1);
let isIos = ref(false);
let levelActive = ref({});
const introduceList = ref([
  {
    title: "官方最新模型VIP级聊天接口",
    content: "消息秒回，秒杀全部盗版",
  },
  {
    title: "您的AI私人助理",
    content: "关于医疗、自媒体、学习工作等，帮您提高效率",
  },
  {
    title: "AI工作小帮手",
    content: "提供全天候服务，让您在工作中更高效、更轻松",
  },
]);
const isPayPopupShow = ref(false);
const payInfo = ref({});
getIsIos({
  fn: (res) => {
    isIos.value = res;
  },
});

const activePayInfo = (e) => {
  isPayPopupShow.value = true;
  payInfo.value = e;
};
function getLevelActive(item) {
  debugger;
  levelActive.value = item;
}
onLoad((e) => {
  active.value = e.active;
});
</script>

<template>
  <van-tabs :active="active" v-if="!isIos">
    <van-tab title="对话会员">
      <div class="vip-list">
        <vipListItem @getLevelActive="getLevelActive" @payInfo="activePayInfo"></vipListItem>
      </div>
    </van-tab>
    <van-tab title="绘画算力">
      <div class="vip-list">
        <vipPainting :levelActive="levelActive" payInfo="payInfo"></vipPainting>
      </div>
    </van-tab>
  </van-tabs>
  <div v-else>
    <p class="iosShow">由于相关规范，ios功能暂不可用</p>
    <Introduce :introduceList="introduceList"></Introduce>
  </div>
  <vipPayPopup v-model:isPayPopupShow="isPayPopupShow" :payInfo="payInfo"></vipPayPopup>
</template>

<style lang="less" scoped>
.iosShow {
  color: var(--a-one-text-color);
  font-weight: bold;
  text-align: center;
  margin: 100rpx 0 100rpx;
}

.vip-list {
  margin-top: 25rpx;
}
</style>
